<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: #f1f1f1;
        }

        ul {
            list-style: none;
        }

        #title {
            text-align: center;
        }

        #description {
            font-size: 14px;
            color: #434343;
            text-align: center;
        }

        #survey-form {
            width: 650px;
            margin: 30px auto;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1);
            padding: 20px;
        }

        .form-item {
            width: 100%;
            margin: 30px;
        }

        .label, .input-wrap {
            display: inline-block;
            min-width: 300px;
            vertical-align: center;
        }

        .label {
            text-align: right;
        }

        .input-wrap {
            padding: 0 10px;
        }

        input[type=text], input[type=email], input[type=number] {
            background: rgba(255, 255, 255, .5);
            border: 0 solid;
            padding: 10px;
            min-width: 200px;
            border-radius: 6px;
        }

        select {
            background: rgba(255, 255, 255, .5);
            border:0 solid;
            padding: 10px;
            border-radius: 6px;
        }

        #comments{
            background: rgba(255,255,255,.5);
            border: 0 solid;
            border-radius: 6px;
            width:300px;
            height:100px;
        }

        #submit{
            display:block;
            width:80px;
            padding: 10px;
            border-radius: 6px;
            border:0 solid ;
            background:#fff;
            margin:0 auto;
        }

    </style>
</head>
<body>
<h1 id="title">调查问卷</h1>
<div id="form-outer">
    <p id="description">针对前端编程的一些问题</p>
    <form id="survey-form" method="GET" action="#">
        <div class="form-item">
            <div class="label">
                <label id="name-label" for="name">姓名: </label>
            </div>
            <div class="input-wrap">
                <input autofocus type="text" name="name" id="name" class="input-field" placeholder="请输入您姓名" required>
            </div>
        </div>
        <div class="form-item">
            <div class="label">
                <label id="email-label" for="email">邮箱: </label>
            </div>
            <div class="input-wrap">
                <input type="email" name="email" id="email" class="input-field" required placeholder="请输入您的邮箱">
            </div>
        </div>
        <div class="form-item">
            <div class="label">
                <label id="number-label" for="age">年龄: </label>
            </div>
            <div class="input-wrap">
                <input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="请输入您的年龄">
            </div>
        </div>
        <div class="form-item">
            <div class="label">
                <label for="currentPos">您目前的职业是？</label>
            </div>
            <div class="input-wrap">
                <select id="dropdown" name="currentPos" class="dropdown">
                    <option disabled value>-请选择-</option>
                    <option value="学生">学生</option>
                    <option value="前端工程师">前端工程师</option>
                    <option value="后端工程师">后端工程师</option>
                    <option value="全栈工程师">全栈工程师</option>
                </select>
            </div>
        </div>
        <div class="form-item">
            <div class="label">
                <label>您觉得最有效的学习方式是</label>
            </div>
            <div class="input-wrap">
                <ul style="list-style: none;">
                    <li class="radio"><label>学习专业付费课程<input name="radio-buttons" value="1" type="radio"
                                                            class="favorite"></label></li>
                    <li class="radio"><label>阅读相关书籍<input name="radio-buttons" value="2" type="radio" class="favorite"></label>
                    </li>
                    <li class="radio"><label>自己凭借兴趣学习<input name="radio-buttons" value="3" type="radio"
                                                            class="favorite"></label></li>
                </ul>
            </div>
        </div>
        <div class="form-item">
            <div class="label">
                <label for="most-like">您最喜欢的前端框架是？ </label>
            </div>
            <div class="input-wrap">
                <select id="most-like" name="mostLike" class="dropdown">
                    <option disabled selected value>-请选择-</option>
                    <option value="Vue">Vue</option>
                    <option value="React">React</option>
                    <option value="Angular">Angular</option>
                </select>
            </div>
        </div>
        <div class="form-item">
            <div class="label">
                <label for="preferences">您最想学习的相关知识有（多选）: </label>
            </div>
            <div class="input-wrap">
                <ul>
                    <li class="checkbox"><label><input name="prefer" value="1" type="checkbox"
                                                       class="userRatings">前端</label></li>
                    <li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">后端</li>
                    <li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">数据库相关</label>
                    </li>
                    <li class="checkbox"><label><input name="prefer" value="4" type="checkbox"
                                                       class="userRatings">运维</label></li>
                    <li class="checkbox"><label><input name="prefer" value="5" type="checkbox"
                                                       class="userRatings">产品</label></li>
                </ul>
            </div>
        </div>
        <div class="form-item">
            <div class="label">
                <label for="comments">有何想法?</label>
            </div>
            <div class="input-wrap">
                <textarea id="comments" class="input-field" name="comment"
                          placeholder="请在这输入您的宝贵意见和建议"></textarea>
            </div>
        </div>
        <button id="submit" type="submit">提交</button>
    </form>
</div>
</body>
</html>